<template>
	<view>
		<view class="top_search">
			<uni-search-bar v-model="key_word" class="imput_com" focus :radius="100" clearButton="auto" cancelButton="none" @input="input_fun" ></uni-search-bar>
		</view>
		<view class="tip_show_list" v-if="search_show_list.length != 0">
			<navigator :url="`../goods_dedail/goods_dedail?id=${item.goods_id}`" class="li_item" :key="item.goods_id" v-for="(item, index) in search_show_list">{{item.goods_name}}<uni-icons class="uni_icon_1" type="forward" size="30"></uni-icons></navigator>
		</view>
		<view class="histosy_box" v-else>
			<view class="top">
				<text>搜索历史</text>
				<uni-icons @click="clear_histosy" type="trash-filled" size="15"></uni-icons>
			</view>
			<view class="keyword_tag">
				<navigator :url="`../goods_list/goods_list?query=${item}`" class="item_k" :key="index" v-for="(item, index) in com_histosy_List">{{item}}</navigator>
			</view>
		</view>
		<!-- <van-dialog id="van-dialog" /> -->
	</view>
</template>

<script>
	// import Dialog from '@vant/weapp/dist/dialog/dialog';
	export default {
		data() {
			return {
				key_word: {},
				search_show_list: [],
				histosy_List: JSON.parse(uni.getStorageSync('histosy_List')) || []
			};
		},
		methods: {
			input_fun() {
				// 发抖优化
				clearTimeout(uni.timer_1)
				uni.timer_1 = setTimeout(async () => {
					if(this.key_word.value.trim() != '') {
						const {data: res} = await uni.$http.get('/api/public/v1/goods/qsearch', {
							query: this.key_word.value
						})
						this.search_show_list = res.message;
						const my_set = new Set(this.histosy_List)
						my_set.delete(this.key_word.value)
						my_set.add(this.key_word.value)
						this.histosy_List = Array.from(my_set)
						uni.setStorageSync('histosy_List', JSON.stringify(this.histosy_List));
					}else {
						this.search_show_list = [];
					}
				}, 1000);
			},
			clear_histosy() {	
				this.histosy_List = [];
				uni.setStorageSync('histosy_List', JSON.stringify(this.histosy_List));
			},
		},
		computed: {
			com_histosy_List() {
				return this.histosy_List.reverse()
			}
		},
		onLoad() {
		},
		components: {
		}
	}
</script>

<style lang="scss">
.top_search {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100rpx;
	background-color: #bb0000;
	padding: 0 30rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	box-sizing: border-box;
	z-index: 20;
	.seach_box {
		height: 72rpx;
		width: 100%;
		background-color: #fff;
		border-radius: 36rpx;
		text-align: center;
		line-height: 72rpx;
		.iconBox {
			font-weight: 1000;
		}
		.text {
			font-size: 30rpx;
			margin-left: 20rpx;
		}
	}
}
.tip_show_list {
	margin-top: 100rpx;
	.li_item {
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 35rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		border-bottom: #eeee;
		position: relative;
	}
}
.histosy_box {
	margin-top: 100rpx;
	padding: 20rpx;
	.top {
		display: flex;
		justify-content: space-between;
		text {
			font-size: 30rpx;
		}
	}
	.keyword_tag {
		display: flex;
		margin-top: 20rpx;
		.item_k {
			padding: 5rpx 15rpx;
			background-color: #f6f9f8;
			margin-right: 10rpx;
			font-weight: 300;
		}
	}
}
.imput_com {
	width: 100%;
}
.uni_icon_1 {
	position: absolute;
	top: 5rpx;
	right: -3rpx;
	z-index: 15;
}
</style>
